import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import addIcon from '../../../assets/images/invoice/add.png';
import editIcon from '../../../assets/images/invoice/edit.png';

@connect(({
  invoice,
}) => {
  return {
    dataList: invoice.get('invoiceInfoList'),
    openType: invoice.get('openType'),
  };
})
class InvoiceInfoList extends BaseComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'invoice/fetchInfoListIfNeeded',
      payload: { openType: 2 },
    });
  }

  goEdit = (e, invoiceInfo) => {
    e.stopPropagation();
    this.props.history.push({
      pathname: 'editInvoiceInfo',
      state: { invoiceInfo },
    });
  }

  goInvoice = () => {
    this.props.history.goBack();
  }

  goInvoiceList = () => {
    this.props.history.push('invoiceList');
  }

  selectInfo = (info) => {
    const { openType } = this.props;
    const { select } = this.props.location.state || {};
    console.log('----', select);
    if (openType === 2 && select) {
      this.props.dispatch({
        type: 'invoice/selectInfo',
        payload: info,
      });
      this.props.history.goBack();
    }
  }

  render() {
    const { dataList } = this.props;
    const cells = dataList.map((info, index) => {
      return (
        <div className="info-cell" key={index} onClick={() => this.selectInfo(info)}>
          <div className="cell-body">
            <div className="title">{info.get('companyName')}</div>
            <div className="text">纳税人识别号：{info.get('taxCode')}</div>
          </div>
          <img src={editIcon} alt="" className="icon" onClick={e => this.goEdit(e, info)} />
        </div>
      );
    });
    return (
      <div className="invoice-info">
        <div className="header">
          <div onClick={this.goInvoice}>去开票</div>
          <div onClick={this.goInvoiceList}>开票记录</div>
        </div>
        <div className="add-view" onClick={e => this.goEdit(e)}>
          <img src={addIcon} className="icon" alt="" />
          <div>添加发票抬头</div>
        </div>
        <div className="list">
          {cells}
        </div>
      </div>
    );
  }
}

export default InvoiceInfoList;
